<template>
	<view class="MainDraw" v-if="grid_info_arr.length>0" >
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
			<view class="content">
				<LotteryDraw :lottery_draw_param="lottery_draw_param"  :grid_info_arr="grid_info_arr" :prize_count="prize_count" :task_list="task_rule" :act_rule="act_rule" :prize_record="prize_record"
				 @finish_task="finish_task"
				 @luck_draw_finish='luck_draw_finish'></LotteryDraw>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import LotteryDraw from '../../pages/other/SJ-LotteryDraw/SJ-LotteryDraw.vue';

	
	export default {
		components: {
			LotteryDraw
		},
		data() {
			return {
				scrollTop: 200,
				r_user_id:null,
				grid_info_arr: [],
				task_rule:[],
				act_rule:{},
				prize_record:[],
				prize_count:{},
				lottery_draw_param: {
					startIndex: 0, //开始抽奖位置，从0开始
					totalCount: 4, //一共要转的圈数
					winingIndex: 2, //中奖的位置，从0开始
					speed: 50, //抽奖动画的速度 [数字越大越慢,默认100]
					aroundCount: 0, //转动格子次数
					number_of_draws: 0, //抽奖次数
				}
			};
		},
	async	onLoad(options) {
			// this.r_user_id=options.r_user_id || 0
			// if(this.r_user_id!=0){
			// 	getApp().globalData.r_user_id=options.r_user_id
			// }
		},
		async onShow() {
			
			this.getlist()
		},
		methods: {
			async getlist() {
				let res =await this.$api.post('/Lucky/List')
				console.info(res)
				this.grid_info_arr = res.data.PrizeList;
				this.task_rule=res.data.PrizeTaskList;
				this.act_rule=res.act_rule
				this.lottery_draw_param.winingIndex =res.wining 
				this.prize_record=res.prize_record
				this.prize_count=res.prize_count
				this.lottery_draw_param.number_of_draws = res.prize_num || 0
			},
			async reload_data(){
				let res =await this.$api.post('/Lucky/List')
				console.info(res)
				this.task_rule=res.task_rule
				this.prize_record=res.prize_record
				this.prize_count=res.prize_count
				this.lottery_draw_param.number_of_draws = res.prize_num || 0
			},
			luck_draw_finish(param) {
				console.log(param)
				this.lottery_draw_param.number_of_draws--
				this.$nextTick(function(){
					this.reload_data()
				})
				// console.log(`抽到第${param+1}个方格的奖品`)
			},
			finish_task(item){
				// console.info(item)
				uni.showToast({
					title:'领取成功!',
					icon:'none',
				    mask:true,
					duration:2000
				})
				this.task_rule[item.index].status=1
				this.lottery_draw_param.number_of_draws+=this.task_rule[item.index].add_num
			}

		},
		async onShareAppMessage(res) {
			let that = this;
			let user=this.$common.user()
			// console.info(this.$common.user())
				return {
					title:'动魅幸运抽奖，人人都有份',
					// content:that.storyContent.desc,
					// imageUrl: `${imgs[0].imgs}`,
					path: `/pages/other/lucky?p=${user.user_id}`
				};
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FB6D6F;
	}

	.xiaoju-code {
		width: 250rpx;
		height: 250rpx;
		margin-top: 30rpx;
		margin-left: 250rpx;
	}

	.MainDraw {
		width: 100%;

		// height: 880upx;
		// position: absolute;
		// bottom: 0upx;

		.scroll-Y {
			width: 100%;

			// height: 800upx;
			.content {
				margin-top: 25upx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

		}
	}

	.notice_bg {
		width: 750upx;
		// height: 150upx;
		margin: 40upx 0upx 0upx;
		// border-radius: 52upx;
		display: flex;
		justify-content: center;
		align-items: center;

		&_1 {
			width: 94%;
			height: 90%;
			// background-color: orange;
			// border-radius: 40upx;
			// border: 8upx solid red;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;

			.NoticePrize {
				width: 95%;
				height: 60upx;
				// margin-top:1upx;
				background-color: #FFFACD;
				border-radius: 30upx;
			}

			&_bottom {
				width: 98%;
				height: 20upx;
				background-color: red;
				border-radius: 30upx;

				.framePrize {
					width: 98%;
					height: 200upx;
					background-color: white;
					margin: 7upx auto 0upx;
					border-radius: 0upx 0upx 20upx 20upx;
				}
			}
		}
	}
</style>
